<template>
    <div class="wrap ">
        <div class="flexWrap">
            <div class="leftWrap">
                <div class="app-button-container">
                    <el-button type="primary">
                        <router-link to = '/followupForm/followupFormEdit/0'>新建</router-link>
                    </el-button>
                </div>

                <div class="filter-container">
                    <div class= 'filterBox'>
                    <div class='leftPart filterPart'>
                    </div>
                    <div class='rightPart filterPart'>
                        <el-input style="width: 220px;" class="filter-item" placeholder="请输入搜索条件" v-model="filter.keyWord">
                        </el-input>
                        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
                    </div>
                    </div>
                </div>
                <complexTable 
                    :columnsType= "'index'" 
                    :list = 'tableList1' 
                    :theadList = "followupConst.theadList1" 
                    :totalList = 'totalList' 
                    :operationButtons = 'followupConst.operationButtons1' 
                    :statusArr = 'followupConst.statusArr'
                    @getListByPagination = 'handleFilter'
                    @operationEvent1 = 'operationEvent1'>
                </complexTable>
            </div>
            <!--<div class="rightWrap">-->
                <!--<category></category> -->
            <!--</div>-->
          <div class="rightWrap">
            <category :options = 'options' @selectedType = 'selectedType'></category>
          </div>
        </div>
    </div>
</template>

<script>
    import waves from '@/directive/waves/index.js'
    import complexTable from '@/views/table/complexTable'
    import category from '@/yimiviews/components/category'
    import { followupConst } from '@/yimiviews/knowledgeManage/columnsConst'
    import { page, deleteForm } from '@/api/knowledgeManage/followupForm'
    import { dictionary } from '@/api/knowledgeManage/dictionary'
    export default {
      directives: { waves },
      components: { category, complexTable },
      mounted() {
        this.initSelect()
        this.handleFilter(this.listQuery)
      },
      data() {
        return {
          followupConst,
          tableList1: [],
          totalList: 0,
          filter: {
            type: '',
            keyword: ''
          },
          listQuery: {
            page: 1,
            limit: 5
          },
          options: []
        }
      },
      methods: {
        selectedType(selected) {
          this.filter.type = selected.value
          this.listQuery.page = 1
          this.handleFilter(this.listQuery)
        },
        initSelect() {
          dictionary({ type: 'bdlx' }).then((res) => {
            this.options = res.data.list
          })
        },
        handleFilter(listQuery) {
          this.listQuery.page = listQuery.page
          this.listQuery.limit = listQuery.limit
          const query = Object.assign({}, this.filter, this.listQuery)
          page(query).then(res => {
            this.tableList1 = res.data.list
            this.totalList = res.data.total
          })
        },
        operationEvent1(row) {
          this.$confirm('您确定要删除此表单吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              deleteForm(row.id).then(() => {
                this.$message({
                  message: '恭喜你，表单删除成功！',
                  type: 'success',
                  duration: 2000
                })
              })
            })
            .catch(action => {
              this.$message({
                type: 'info',
                message: '放弃删除'
              })
            })
        }
      }
    }
</script>

<style lang="scss">
.wrap{
  
     .flexWrap{
        display: flex;
        height: 100%;
        background-color: #fff;
        overflow-y: scroll;
        overflow-x: hidden;
        .leftWrap{
            flex: 10;
        }
        .rightWrap{
            flex: 2;
        }
    }
.filterBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .filterPart{
      line-height: 2;
    }
  }
}
</style>
